<link rel="stylesheet" href="../css/font-awesome.min.css">
<style>
    #headerBox{
        padding: 20px 0;
        background: #fff;
    }
    .newLogo{
        width: 234px;
    }
    .newHeadNav{
        padding: 20px 0 23px;
    }
    .newHeadNav a{
        font-size: 18px;
        color:#000;
    }
    .newHeadNav a:hover{
    	color:#EA5404;
    }
    .newHeadNav li{
        float: left;
        margin-right: 40px;
    }
    .newHeadNav li:first-child{
        margin-left: 0;
    }
    .newSearch{
        width: 401px;
        height: 41px;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        box-sizing: border-box;
        margin-top: 8px;
        color: #666666;
    }
    .newSearch > div{
        float: left;
        height: 100%;
    }
    .searchType{
        width: 68px;
        line-height: 38px;
        text-align: center;
        position: relative;
        cursor: pointer;
    }
    .searchType:after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        top: 8px;
        bottom: 8px;
        width: 1px;
        background: #E0E0E0;
    }
    .searchCont{
        width: 292px;
        line-height: 38px;
    }
    
    .searchCont input[type="text"]{
    	margin: 0;
		padding: 0 10px;
		height: 100%;
        width: 100%;
		vertical-align: bottom;
        border: none;
    }
    div.searchIcon{
        padding: 8px;
        height: 23px;
        position:relative;
    }
    .searchIcon:after{
        content: '';
        display: block;
        width: 1px;
        background: #E0E0E0;
        position:absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
    }
    .searchClass{
        background:  #fff;
        border: 1px solid #e0e0e0;
        border-top: 0;
        position: relative;
        top: 1px;
        width: 67px;
        left: -1px;
        z-index: 50;
    }
    .searchClass:hover{
        background: #f5f5f5;
    }
    .searchResult{
        position: relative;
        left: -1px;
        font-size: 12px;
    }
    .searchHost,
    .searchResult{
        width: 292px;
        height: 194px;
        top: 10px;
        border: 1px solid #e0e0e0;
        background: #fff;
        position: relative;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 20;
    }
    .searchResult > li{
        padding: 10px;
        cursor: pointer;
        line-height: 1;
    }
    .searchXG .resultItem:hover{
        background: #ffe4d1;
    }
    .searchCont > input{
        box-sizing: border-box;
    }
    .showSearch1{
        border-bottom-left-radius: 0;
    }
    .showSearch2:after{
        bottom: 0;
    }
    .searchHost{
        padding-left: 10px;
        box-sizing: border-box;
        position:relative;
    }
    .searchHost > :first-child:after{
        content: '';
        display: block;
        position: absolute;
        top: 10px;
        bottom: 4px;
        width: 1px;
        background: #e8e8e8;
        right: 0;
    }
    .searchHost > li{
        float:left;
        width: 150px;
        padding: 10px 0 4px;
        height: 100%;
        box-sizing: border-box;
        position:relative;
    }
    .searchHost > :first-child > :first-child{
        padding-left: 0;
        margin-bottom: 13px;
    }
    .searchHost > :first-child{
        padding-right: 0;
        width: 130px;
    }
    .searchHost .hmH6{
        line-height: 1;
        margin-bottom: 9px;
        padding-left: 10px;
    }
    .searchHost .resultItem{
        cursor: pointer;
        padding: 9px;
        padding-left: 10px;
        padding-right: 10px;
        line-height: 1;
        font-size: 12px;
        color: #999999;
    }
    .searchHost .resultItem:hover{
        color: #666666;
    }
    .HostHref{
        position:relative;
    }
    .HostHref a{
        padding: 4px 9px;
        border: 1px solid #e8e8e8;
        border-radius: 6px;
        margin-right: 10px;
        white-space: nowrap;
        display: block;
        float:left;
        line-height: 1;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 10px;
        color: #999999;
        font-size: 12px;
    }
    .searchIcon{
        cursor: pointer;
    }
    
    
</style>
<script src="../js/vue.min.js"></script>
<script>
    $(function () {
        var searchH = [];
        var search = new Vue({
            el: "#search",
            data: {
                // 店铺数组
                dpHost: [],
                dpSearch: [],
                // 商品数组
                spHost: [],
                spSearch: [],
                // 历史记录
                history: [],
            },
            methods:{
            	go_detail:function(id){
            		console.log(id);
            		location.href = '../view/detail.html?goodsId='+id;
            	},
            	go_shopHome:function(id){
            		console.log(id);
            		location.href = '../view/shopHome.html?shopId='+id;
            	},
            	go_search:function(){
            		console.log('222');
            		var name = $(".searchCont").find("input").val();
            		if($('.searchS').html()=='商品'){//查询商品
            			location.href = '../second/second.html?goodsName='+name;
            		}else{
            			location.href = '../view/shop.html?shopName='+name;
            		}
            	},
            	go_history:function(name){
            		console.log('go_history');
            		if($('.searchS').html()=='商品'){//查询商品
            			location.href = '../second/second.html?goodsName='+name;
            		}else{
            			location.href = '../view/shop.html?shopName='+name;
            		}
            	},
            }
        });

        // 商品、店铺选择事件
        $(".searchType").click(function (event) {
            var $obj = $(this).find("i");
            var $parent = $(this).parents(".newSearch");
            if ($obj.is(".fa-angle-down")) {
                $obj.removeClass("fa-angle-down");
                $obj.addClass("fa-angle-up");
                $parent.addClass("showSearch1");
                $(this).addClass("showSearch2")
            }else {
                $obj.addClass("fa-angle-down");
                $obj.removeClass("fa-angle-up");
                $parent.removeClass("showSearch1");
                $(this).removeClass("showSearch2")
            }
            $(".searchClass").toggle();
        });
        $(".searchClass").click(function () {
            var $objS = $(this).siblings(".searchS");
            var ori = $objS.text();
            $objS.text($(this).text());
            $(this).text(ori);
        });

        // 存储jQuery元素变量
        var $input = $(".searchCont").find("input");

        // 搜索框获得焦点事件
        $input.focus(function () {
            $(this).siblings(".searchHost").show();
            var txt = $(".searchType").find(".searchS").text();
            var val = $(this).val;
            if (val == "") {
                $(this).siblings(".searchResult").hide();
            }
            if (txt == "店铺") {
                $.ajax({
                    url: SURL + "sktShops/findShopsAll",
                    success: function (data) {
                        search.dpHost = data.entity;
                    }
                })
            }
        });

        // 搜索框失去焦点事件
//      $input.blur(function () {
//          $(this).siblings(".searchHost").hide();
//          $(this).siblings(".searchResult").hide();
//      });
		
		$(".searchHost").mouseleave(function(){
			$(this).hide();
		});
		$(".searchResult").mouseleave(function(){
			$(this).hide();
		})
		
        // 搜索框获得按键事件
        $input.keyup(function () {
            $(this).siblings(".searchHost").hide();
            var txt = $(".searchS").text();
            var val = $(this).val();
            if ($(this).val() != "") {
                $(this).siblings(".searchResult").show();
                if (txt == "店铺") {
                    $.ajax({
                        url: SURL + "sktShops/selectShopsName",
                        data: {
                            shopName: val
                        },
                        success: function (data) {
                            // 初始化选择结果
                            search.dpSearch = [];
                            // 存储结果的数组
                            var dArr = data.entity;
                            if (dArr.length > 0 && dArr.length < 6) {
                                for (var i=0; i<dArr.length; i++) {
                                    search.dpSearch.push(data.entity[i]);
                                }
                            }else if (dArr.length >= 6){
                                for (var i=0; i<6; i++) {
                                    search.dpSearch.push(data.entity[i]);
                                }
                            }
                        }
                    })
                }else if(txt == "商品") {
                    $.ajax({
                        url: SURL + "goods/selectByGoods",
                        data: {
                            goodsName: val
                        },
                        success: function (data) {
                            // 初始化选择结果
                            search.spSearch = [];
                            // 存储结果的数组
                            var sArr = data.entity;
                            if(sArr.length > 0 && sArr.length < 6){
                                for (var i=0; i<sArr.length; i++){
                                    search.spSearch.push(data.entity[i]);
                                }
                            }else if(sArr.length >= 6){
                                for (var i=0; i<5; i++) {
                                    search.spSearch.push(data.entity[i]);
                                }
                            }
                        }
                    })
                }
            }else {
                $(this).siblings(".searchResult").hide();
            }
        });

        // 搜索点击事件
        $(".searchIcon").click(function () {
            // 初始定义  searchH
            var str = $(".searchCont").find("input").val();
            var type = $(".searchS").text();

            if (type == "店铺") {
                searchH = [];
                // 转换vue实例店铺历史字符串
                var txt = search.history.toString();
                if (txt.indexOf(str) < 0) {
                    searchH.push(str);
                    if (searchH.length >= 5) {
                        searchH.shift();
                    }
                    for (var i=0; i<searchH.length; i++){
                        search.history.push(searchH[i]);
                    }
                }
            }else if (type == "商品") {
                searchH = [];
                // 转换vue实例商品历史数组
                var txt = search.history.toString();
                if (txt.indexOf(str) < 0) {
                    // 对vue实例操作
                    searchH.push(str);
                    if (searchH.length >= 5) {
                        searchH.shift();
                    }
                    for (var i=0; i<searchH.length; i++){
                        search.history.push(searchH[i]);
                    }
                }
            }
        });
    });
</script>
<div id="search" class="containerBox fontBase clearFix">
    <div class="newLogo fl">
        <a href="../view/index.html"><img src="../images/index/logo.png" height="60" alt=""/></a>
    </div>
    <ul class="newHeadNav fl">
        <li><a href="javascript:void(0)">全部商品分类</a></li>
        <li><a href="../view/index.html">首页</a></li>
        <li><a href="../brandStreet/brandStreet.html">品牌街</a></li>
        <!--<li><a href="#">厨房清洁</a></li>-->
        <li><a href="../view/shop_list.html">店铺街</a></li>
        <!--<li><a href="#">床上家居</a></li>-->
        <li><a href="../view/index.html">自营超市</a></li>
    </ul>
    <div class="newSearch fr clearFix">
        <div class="searchType">
            <span class="searchS">商品</span><i class="fa fa-angle-down"></i>
            <div class="searchClass hide">店铺</div>
        </div>
        <div class="searchCont">
            <input type="text" placeholder="连衣裙">
            <ul class="searchResult searchXG hide">
                <li v-for="item in dpSearch" @click="go_shopHome(item.shopId)">{{item.shopName}}</li>
                <li v-for="itm2 in spSearch" @click="go_detail(itm2.goodsId)">{{itm2.goodsName}}</li>
            </ul>
            <ul class="searchHost searchXG hide">
                <li>
                    <h6 class="hmH6">热门搜索</h6>
                    <div class="HostHref clearFix">
                        <a href="#none" v-for="itemt in dpHost" @click="go_shopHome(itemt.shopId)">{{itemt.shopName}}</a>
                        <a href="#none" v-for="itemt2 in spHost" @click="go_detail(itemt2.goodsId)">{{itemt2.shopName}}</a>
                    </div>
                </li>
                <li>
                    <h6 class="hmH6">搜索历史</h6>
                    <ul>
                        <li class="resultItem" v-for="itemo in history" @click="go_history(itemo)">{{itemo}}<i></i></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="searchIcon" @click="go_search()">
            <img src="../images/newSearch.png" alt=""/>
        </div>
    </div>
</div>
<!--TODO:没有全部弄完-->